<template>
  <Card>
    <p slot="title">区划分布情况</p>
    <div class="chart" id="chart-section-distribute"></div>
    <Divider />
    <span class="text">执法量最高区划：{{highest}}</span>
    <Spin v-show="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      highest: "暂无数据",
      option: null,
      loading: false,
      districtNames: [
        "南明区",
        "云岩区",
        "观山湖区",
        "花溪区",
        "乌当区",
        "白云区",
        "经开区",
        "清镇市",
        "息烽县",
        "修文县",
        "开阳县"
      ]
    };
  },
  methods: {
    renderChart() {
      this.loading = true;
      this.option = {
        tooltip: {
          trigger: "item",
          axisPointer: { type: "shadow" },
          show: true
        },
        legend: {
          data: this.districtNames,
          itemWidth: 12,
          itemHeight: 12,
          x: "top",
          y: "left",
          orient: "horizontal"
        },
        color: this.COLORS,
        series: [
          {
            name: "区域分布情况",
            type: "pie",

            center: ["50%", "50%"],
            radius: ["70%", "55%"],
            data: this.districtNames.map(o => {
              return {
                name: o,
                value: 0
              };
            }),
            label: {
              normal: {
                formatter: "{b}\n{c}起",
                position: "outside"
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 35
            },
            itemStyle: {
              normal: {
                shadowColor: "#00000030",
                shadowBlur: 25,
                shadowOffsetX: 0,
                shadowOffsetY: 5
              }
            }
          }
        ]
      };
      this.$Crender("chart-section-distribute", this.option);
      this.loading = false;
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart {
  height: 410px;
}
</style>